<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/theme.css">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding: 5px;
            border: 1px #f60 solid;
        }

        #typeList :not(:first-child) {
            margin-top: 20px;
        }

        .label-txt {
            margin: 10px 10px;
            border: 1px solid #ddd;
            padding: 4px;
            font-size: 14px;
        }

        .panel {
            border-radius: 0;
        }

        .progress-bar-default {
            background-color: #ddd;
        }

        .selected {
            color: yellow;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" th:href="@{/}" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> [[${session.member.username}]]<span
                                    class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a th:href="@{/auth/member/to/center/page}"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a th:href="@{/auth/member/do/loginout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" th:href="@{/}"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                            </li>
                            <li>
                                <a rel="nofollow" th:href="@{/project/get/project/pagination/data/0}"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
                            </li>
                            <li class="active">
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-edit"></i> 发起项目</a>
                            </li>
                            <li>
                                <a rel="nofollow" th:href="@{/auth/member/to/my/crowd/page}"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <form id="projectForm" th:action="@{/project/create/project/information}" method="post" enctype="multipart/form-data" class="form-horizontal">
                    <p th:text="${session.message}">这里显示发起项目失败的提示消息</p>
                    <div class="panel panel-default">
                        <div class="panel-heading" style="text-align:center;">
                            <div class="container-fluid">
                                <div class="row clearfix">
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;    position: absolute;width: 75%;right:49px;">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                 style="width: 100%;height:50px;">
                                                <div style="font-size:16px;margin-top:15px;">1. 项目及发起人信息</div>
                                            </div>
                                        </div>
                                        <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(92, 184, 92, 1);
                                             border-top-color: rgba(92, 184, 92, 0);
                                             border-bottom-color: rgba(92, 184, 92, 0);
                                             border-right-color: rgba(92, 184, 92, 0);
                                        ">
                                        </div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                            <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                 style="width: 100%;height:50px;">
                                                <div style="font-size:16px;margin-top:15px;">2. 回报设置</div>
                                            </div>
                                        </div>
                                        <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                        </div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                            <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                 style="width: 100%;height:50px;">
                                                <div style="font-size:16px;margin-top:15px;">3. 确认信息</div>
                                            </div>
                                        </div>
                                        <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                        </div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;">
                                            <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                 style="width: 100%;height:50px;">
                                                <div style="font-size:16px;margin-top:15px;">4. 完成</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row clearfix">
                                    <div class="col-md-12 column">
                                        <blockquote style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                            <b>
                                                项目及发起人信息
                                            </b>
                                        </blockquote>
                                    </div>
                                    <div class="col-md-12 column">
                                        <div class="page-header" style="    border-bottom-style: dashed;">
                                            <h3>
                                                项目信息
                                            </h3>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">分类信息</label>
                                            <div class="col-sm-10">
                                                <label class="radio-inline">
                                                    <input type="checkbox" name="typeIdList" value="1"
                                                           th:checked="${session.temp_project?.typeIdList != null && not #lists.isEmpty(session.temp_project.typeIdList) && #lists.contains(session.temp_project.typeIdList, 1)}">
                                                    科技
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="checkbox" name="typeIdList" value="2"
                                                           th:checked="${session.temp_project?.typeIdList != null && not #lists.isEmpty(session.temp_project.typeIdList) && #lists.contains(session.temp_project.typeIdList, 2)}">
                                                    设计
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="checkbox" name="typeIdList" value="3"
                                                           th:checked="${session.temp_project?.typeIdList != null && not #lists.isEmpty(session.temp_project.typeIdList) && #lists.contains(session.temp_project.typeIdList, 3)}">
                                                    公益
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="checkbox" name="typeIdList" value="4"
                                                           th:checked="${session.temp_project?.typeIdList != null && not #lists.isEmpty(session.temp_project.typeIdList) && #lists.contains(session.temp_project.typeIdList, 4)}">
                                                    农业
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">标签</label>
                                            <div class="col-sm-10">
                                                <div th:if="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList)}">
                                                    <th:block th:each="tagId : ${session.temp_project?.tagIdList}">
                                                        <input type='hidden' th:attr="name='tagIdList', value=${tagId}"/>
                                                    </th:block>
                                                </div>
                                                <ul style="list-style:none;padding-left:0;">
                                                    <li style="margin:10px 0">[手机]
                                                        <span class="tagLabel label-txt" id="4"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 4) ? 'selected' : ''}">大屏</span>
                                                        <span class="tagLabel label-txt" id="5"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 5) ? 'selected' : ''}">美颜</span>
                                                        <span class="tagLabel label-txt" id="6"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 6) ? 'selected' : ''}">续航</span>
                                                    </li>
                                                    <li style="margin:10px 0">[数码]
                                                        <span class="tagLabel label-txt" id="7"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 7) ? 'selected' : ''}">高解析度</span>
                                                        <span class="tagLabel label-txt" id="8"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 8) ? 'selected' : ''}">高清</span>
                                                    </li>
                                                    <li style="margin:10px 0">[电脑]
                                                        <span class="tagLabel label-txt" id="9"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 9) ? 'selected' : ''}">大内存</span>
                                                        <span class="tagLabel label-txt" id="10"
                                                              th:classappend="${session.temp_project?.tagIdList != null && not #lists.isEmpty(session.temp_project.tagIdList) && #lists.contains(session.temp_project.tagIdList, 10) ? 'selected' : ''}">固态</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">项目名称</label>
                                            <div class="col-sm-10">
                                                <input name="projectName" type="text" class="form-control"
                                                       th:value="${session.temp_project != null and session.temp_project.projectName != null and session.temp_project.projectName != '' ? session.temp_project.projectName : '项目名称1111'}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">一句话简介</label>
                                            <div class="col-sm-10">
                                                <textarea name="projectDescription" class="form-control" rows="5"
                                                          th:text="${session.temp_project != null and session.temp_project.projectDescription != null and session.temp_project.projectDescription != '' ? session.temp_project.projectDescription : '简介1111'}"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">筹资金额（元）</label>
                                            <div class="col-sm-10">
                                                <input name="money" type="text" class="form-control" style="width:100px;"
                                                       th:value="${session.temp_project != null and session.temp_project.money != null ? session.temp_project.money : 4332322}"/>
                                                <label class="control-label">筹资金额不能低于100元,不能高于1000000000元</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">筹资天数（天）</label>
                                            <div class="col-sm-10">
                                                <input name="day" type="text" class="form-control" style="width:100px;"
                                                       th:value="${session.temp_project != null and session.temp_project.day != null ? session.temp_project.day : 30}"/>
                                                <label class="control-label">一般10-90天，建议30天</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">项目头图</label>
                                            <div class="col-sm-10">
                                                <input type="file" name="headerPicture" style="display: none;"/>
                                                <button id="uploadHeadBtn" type="button" class="btn btn-primary btn-lg active">上传图片</button>
                                                <label class="control-label">图片上无文字,支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：740*457px</label>
                                                <br/><img th:if="${session.temp_project != null and session.temp_project.headerPicturePath != null}"
                                                          th:src="${session.temp_project.headerPicturePath}"
                                                          style="display: block;"/>
                                                <!--<br/><img style="display: none"/>-->
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">项目详情</label>
                                            <div class="col-sm-10">
                                                <!--<input type="file" multiple="multiple" name="detailPictureList" style="display: none;"-->
                                                <!--       th:attr="value=${session.temp_project != null and session.temp_project.detailPicturePathList != null and session.temp_project.detailPicturePathList.size() > 0 ? session.temp_project.detailPicturePathList : null}"/>-->
                                                <input type="file" multiple="multiple" name="detailPictureList" style="display: none;"/>
                                                <button id="uploadDetailBtn" type="button" class="btn btn-primary btn-lg active">上传图片</button>
                                                <label class="control-label">支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：宽740px</label>
                                                <div id="showDetailPicture">
                                                    <th:block
                                                            th:if="${session.temp_project != null and session.temp_project.detailPicturePathList != null and session.temp_project.detailPicturePathList.size() > 0}">
                                                        <img th:each="detailPicturePath : ${session.temp_project.detailPicturePathList}"
                                                             th:src="${detailPicturePath}"/><br/>
                                                    </th:block>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- </form> -->
                                    </div>
                                    <div class="col-md-12 column">
                                        <div class="page-header" style="border-bottom-style: dashed;">
                                            <h3>
                                                发起人信息
                                            </h3>
                                        </div>
                                        <!-- <form class="form-horizontal"> -->
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">自我介绍</label>
                                            <div class="col-sm-10">
                                                <input name="memberLaunchInfoVO.descriptionSimple" type="text" class="form-control" placeholder="一句话自我介绍，不超过40字"
                                                       th:value="${session.temp_project != null and session.temp_project.memberLaunchInfoVO != null
                                                        and session.temp_project.memberLaunchInfoVO.descriptionSimple != null and session.temp_project.memberLaunchInfoVO.descriptionSimple != ''
                                                        ? session.temp_project.memberLaunchInfoVO.descriptionSimple : '自我介绍111111'}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">详细自我介绍</label>
                                            <div class="col-sm-10">
                                                <textarea name="memberLaunchInfoVO.descriptionDetail" class="form-control" rows="5"
                                                          placeholder="向支持者详细介绍你自己或你的团队及项目背景，让支持者在最短时间内了解你，不超过160字"
                                                          th:text="${session.temp_project != null and session.temp_project.memberLaunchInfoVO != null
                                                        and session.temp_project.memberLaunchInfoVO.descriptionDetail != null and session.temp_project.memberLaunchInfoVO.descriptionDetail != ''
                                                        ? session.temp_project.memberLaunchInfoVO.descriptionDetail : '详细自我介绍111111'}">
                                                </textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">联系电话</label>
                                            <div class="col-sm-10">
                                                <input name="memberLaunchInfoVO.phoneNum" type="text" class="form-control" placeholder="此信息不会显示在项目页面"
                                                       th:value="${session.temp_project != null and session.temp_project.memberLaunchInfoVO != null
                                                        and session.temp_project.memberLaunchInfoVO.phoneNum != null and session.temp_project.memberLaunchInfoVO.phoneNum != ''
                                                        ? session.temp_project.memberLaunchInfoVO.phoneNum : '18888888888'}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">客服电话</label>
                                            <div class="col-sm-10">
                                                <input name="memberLaunchInfoVO.serviceNum" type="text" class="form-control" placeholder="此信息显示在项目页面"
                                                       th:value="${session.temp_project != null and session.temp_project.memberLaunchInfoVO != null
                                                        and session.temp_project.memberLaunchInfoVO.serviceNum != null and session.temp_project.memberLaunchInfoVO.serviceNum != ''
                                                        ? session.temp_project.memberLaunchInfoVO.serviceNum : '666666'}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="text-align:center;">
                            <button id="submitBtn" type="button" class="btn  btn-warning btn-lg">下一步</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="container" style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.layoutit.cn">关于我们</a> | <a rel="nofollow" href="http://www.layoutit.cn">服务条款</a> | <a rel="nofollow"
                                                                                                                                                 href="http://www.layoutit.cn">免责声明</a>
                        | <a rel="nofollow" href="http://www.layoutit.cn">网站地图</a> | <a rel="nofollow" href="http://www.layoutit.cn">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2017-2017layoutit.cn 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div> <!-- /container -->
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script type="text/javascript">
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    var tagIdList = [];
    $(".tagLabel").click(function () {
        $(this).toggleClass("selected");
        let id = this.id;
        for (var i = 0; i < tagIdList.length; i++) {
            var value = tagIdList[i];
            if (value === id) {
                // 从数组中删除元素，i是元素索引，1是删除数量
                tagIdList.splice(i, 1);
                return;
            }
        }
        tagIdList.push(id);
    });

    $("#uploadHeadBtn").click(function () {
        $("[name=headerPicture]").click();
    });

    $("[name=headerPicture]").change(function (event) {
        // 获取用户选中的文件
        let files = event.target.files;
        // 使用下标0，选择唯一的一个文件
        let file = files[0];
        // 获取URL对象
        let url = window.url || window.webkitURL;
        // 调用url对象的createObjectURL()方法获取当前选中的文件在系统中的路径
        let path = url.createObjectURL(file);
        // 使用path修改img标签的src属性
        let imgHtml = "<img src='" + path + "' width=\"200\" height=\"150\"/><br/>";
        $(this).next().next().next().after(imgHtml);
    });

    $("#uploadDetailBtn").click(function () {
        $("[name=detailPictureList]").click();
    });

    $("[name=detailPictureList]").change(function (event) {
        $("#showDetailPicture").empty();
        let files = event.target.files;
        let url = window.url || window.webkitURL;
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            let path = url.createObjectURL(file);
            let imgHtml = "<img src='" + path + "' width=\"200\" height=\"150\"/><br/>";
            $("#showDetailPicture").append(imgHtml);
        }
    });

    // 点击下一步按钮提交表单
    $("#submitBtn").click(function () {
        // 将表单中标签id的值组成的数组转换成表单内的隐藏域
        for (let i = 0; i < tagIdList.length; i++) {
            let tagId = tagIdList[i];
            let hiddenInputHTML = "<input type='hidden' name='tagIdList' value='" + tagId + "' />";
            $("#projectForm").append(hiddenInputHTML);
        }

        // 提交表单
        $("#projectForm").submit();
    });

</script>
</body>
</html>
